{% extends "base.html" %}


{% block title %}IPentaE - {{item.Name}}{% endblock %} {% block
page_content %}
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
<link rel="stylesheet" href=".\static\item.css"></script>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
            <div class="carousel slide" id="carousel">
                <ol class="carousel-indicators">
                    {% for k, v in item_detail["image_url"] %} {% if k == 0 %}
                    <li
                        class="active"
                        data-slide-to="{{k}}"
                        data-target="#carousel-470362"
                    ></li>
                    {% else %}
                    <li data-slide-to="{{k}}" data-target="{{v}}"></li>
                    {% endif %} {% endfor %}
                </ol>
                <div class="carousel-inner">
                    {% for k, v in item_detail["image_url"] %} {% if k == 0 %}
                    <div class="item active">
                        <img alt="" src="{{v}}" />
                    </div>
                    {% else %}
                    <div class="item">
                        <img alt="" src="{{v}}" />
                    </div>
                    {% endif %} {% endfor %}
                </div>
                <a
                    class="left carousel-control"
                    href="#carousel"
                    data-slide="prev"
                    ><span class="glyphicon glyphicon-chevron-left"></span
                ></a>
                <a
                    class="right carousel-control"
                    href="#carousel"
                    data-slide="next"
                    ><span class="glyphicon glyphicon-chevron-right"></span
                ></a>
            </div>
        </div>

        <div class="col-md-5 column">
            <div id="title" num={{item.id}}>
                <h3>{{item.Name}}</h3>
            </div>
            <div>
                <font color="#FF0000" style="font-size: 30px"
                    >&nbsp&nbsp&nbsp￥</font
                ><font style="font-size: 40px">{{item.price}}</font>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<font style="font-size: 20px">购买人数</font>&nbsp&nbsp<font color="#FF0000" style="font-size: 30px">{{item_detail["buy_num"]}}</font>
            </div>
            <div class="review">
                <span class="percent">评分</span>
                <div class="progress">
                    <div class="progress-done"
                    style="width:{{item_detail['rate']}}%">
                </div>
            </div>
            <span class="percent">{{item_detail["rate"]}}%</span>
        </div>
        <div style="margin: 30px">
            <span class="comment"
                >有<strong> {{item_detail["comment_num"]}} </strong
                >人评论了这件商品</span
            >
            <span class="comment"
                ><strong> {{item_detail["good_num"]}} </strong>个用户给了<font
                    color="#00EE00"
                    >好评</font
                >，有<strong> {{item_detail["default_num"]}} </strong
                >个用户默认给了<font color="#00EE00">好评</font></span
            >
            <span class="comment"
                ><strong> {{item_detail["middle_num"]}} </strong
                >个用户给了中评，<strong> {{item_detail["bad_num"]}} </strong
                >个用户给了<font color="#FF0000">差评</font></span
            >
        </div>
        <div>
            <a
                href="{{item.url}}"
                style="display: block; width: 50%; float: right"
            >
                <button
                    type="button"
                    class="btn btn-default"
                    style="width: 100%; height: 50px; font-size: 18px"
                >
                    跳转至原网页购买
                </button></a
            >
        </div>
    </div>
    <div class="col-md-3 column">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">其他用户说：</h3>
			</div>
			{% if item_detail["comment"] %}
            {% for content, user, headimg in item_detail["comment"] %}
            <div class="panel-body">
                <div class="left-body">
                    <span>{{content | truncate(25)}}</span>
                </div>
                <div class="right-body">
                    <center><img class="head" alt="{{user}}" src="{{headimg}}" /></center>
                    <p>{{user | safe}}</p>
                </div>
            </div>
			{% endfor %}
			{% else %}
			<div class="panel-body" style="padding-top: 20px;">
                <a href={{item.url}}><font size="3px">还没有用户评论哦，快去评论吧</font></a>
            </div>
			{% endif %}
        </div>
    </div>
</div>

<div>
	<font size="5px">或许您也喜欢：</font>
</div>
<div class="row">
	{% for item in recommand[0] %}
    <div class="col-md-2 recommand-holder">
        <div class="thumbnail">
            <img alt="200x200" src={{item["image_url"][0]}} />
            <div class="caption">
                <a href=/item?id={{item["id"]}}>{{item["title"] | striptags}}</a>
			</div>
			<font color="#FF0000" size="1px">{{item.hotword | StopNone}}</font>
        </div>
	</div>
	{% endfor %}
</div>
<div>
	<font size="5px">为您推荐同品牌的产品：</font>
</div>
<div class="row">
	{% for item in recommand[0] %}
    <div class="col-md-2 recommand-holder">
        <div class="thumbnail">
            <img alt="200x200" src={{item["image_url"][0]}} />
            <div class="caption">
                <a href=/item?id={{item["id"]}}>{{item["title"] | striptags}}</a>
			</div>
			<font color="#FF0000" size="1px">{{item.hotword | StopNone}}</font>
        </div>
	</div>
	{% endfor %}
</div>
<div class="wordcloud row" style="height: 800px;">
    <div class="col-md-3 wordcloud">
        <div class="panel panel-default wordcloud">
            <div class="panel-heading">
                <h3 class="panel-title">用户们都说：</h3>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
            <div style="padding-top: 15px; padding-bottom: 5px; text-align: center; ">
                <font class="panel-wordcloud" size=5px font-weight=20></font>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div style="display: flex; font-size: 30px; font-family:'微软雅黑';">根据用户的评论计算得到该商品的分数为：<font color=#FF0000> {{item.score}} </font></div>
        <div id="wordcloud" style="width:900px; height:500px;"></div>
    </div>
</div>
<script>
    $(
    function () {
        var chart = echarts.init(document.getElementById('wordcloud'), 'white', {renderer: 'canvas'});
        $.ajax({
            type: "GET",
            useCORS: true,
            url: "http://127.0.0.1:8080/wordcloudChart?id="+document.getElementById("title").getAttribute("num"),
            dataType: 'json',
            success: function (result) {
                chart.setOption(result);
                var WordPanel = document.getElementsByClassName('panel-wordcloud');
                for (var i = 0; i < WordPanel.length; i++) {
                    WordPanel[i].innerHTML = (i+1).toString()+'.  '+result['series'][0]['data'][i]['name'];
                    var colorrgb = result['series'][0]['data'][i]['textStyle']['normal']['color'];
                    color = colorrgb.replace("rgb(", "").replace(")", "").split(',')
                    let r,g,b;
                    r = parseInt(color[0], 10).toString(16);
                    g = parseInt(color[1], 10).toString(16);
                    b = parseInt(color[2], 10).toString(16);
                    while (r.length < 2) {r = '0' + r}
                    while (g.length < 2) {g = '0' + g}
                    while (b.length < 2) {b = '0' + b}
                    colorrgb = '#'+r+g+b;
                    WordPanel[i]['color'] = colorrgb;
                }
            }
        });
        
    })
</script>
{% endblock %}
